<template>
  <div class="system-container">
    <!-- 顶部视图部分 -->
    <div class="view-section">
      <h2 class="section-title">视图</h2>
      <div class="view-cards">
        <el-card class="view-card" v-for="(view, index) in views" :key="index">
          <div class="card-content">
            <h3 class="card-title">{{ view.title }}</h3>
            <p class="card-desc">{{ view.description }}</p>
          </div>
        </el-card>
      </div>
    </div>
	<!-- 报表 -->
	<div class="view-section">
	  <h2 class="section-title">报表</h2>
	  <div class="view-cards">
	    <el-card class="view-card" v-for="(view, index) in tables" :key="index">
	      <div class="card-content">
	        <h3 class="card-title">{{ view.title }}</h3>
	        <p class="card-desc">{{ view.description }}</p>
	      </div>
	    </el-card>
	  </div>
	</div>
    <!-- 中间项目管理部分 -->
    <div class="project-section">
      <h2 class="section-title">项目管理</h2>
      <div class="project-stages">
        <div class="stage" v-for="(stage, index) in projectStages" :key="index">
          <h3 class="stage-title">{{ stage.title }}</h3>
          <div class="stage-items">
            <div class="stage-item" v-for="(item, i) in stage.items" :key="i">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 运营与支撑模块 -->
    <div class="operation-section">
      <h2 class="section-title">运营与支撑</h2>
      <div class="operation-cards">
        <el-card class="operation-card" v-for="(operation, index) in operations" :key="index">
          <div class="card-content">
            <h3 class="card-title">{{ operation.title }}</h3>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 基础模块 -->
    <div class="base-section">
      <h2 class="section-title">基础模块</h2>
      <div class="base-items">
        <div class="base-item" v-for="(item, index) in baseItems" :key="index">
          {{ item }}
        </div>
      </div>
    </div>

    <!-- 对外接口 -->
    <div class="interface-section">
      <h2 class="section-title">对外接口</h2>
      <div class="interface-items">
        <div class="interface-item" v-for="(item, index) in interfaces" :key="index">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'System',
  data() {
    return {
      views: [
        { title: '工作台', description: '待办处理的主入口桌面' },
        { title: '项目管理', description: '单项目全生命周期管理' },
        { title: '项目集管理', description: '项目集的全过程管理' },
        { title: '项目组合管理', description: '多项目管理统计和查询' },
        { title: '团队视图', description: '面向部门领导视图' }
      ],
	  tables: [
        { title: '项目报表', description: '待办处理的主入口桌面' },
        { title: '医院报表', description: '单项目全生命周期管理' },
        { title: '进销存报表', description: '项目集的全过程管理' },
        { title: '九阵运营报表', description: '多项目管理统计和查询' },
        { title: '九阵研发报表', description: '面向部门领导视图' }
      ],
      projectStages: [
        {
          title: '启动与计划',
          items: ['项目立项', '需求分析', '项目计划', '资源分配', '预算制定']
        },
        {
          title: '执行与监控',
          items: ['任务分配', '进度跟踪', '质量控制', '风险监控', '成本控制']
        },
        {
          title: '项目收尾',
          items: ['项目验收', '文档归档', '经验总结', '绩效评估', '项目审计']
        }
      ],
      operations: [
        { title: '商务管理' },
        { title: '运营与协作' },
        { title: '资源管理' },
        { title: '质量管理' }
      ],
      baseItems: [
        '组织结构', '用户管理', '权限管理', '系统设置', 
        '数据字典', '日志管理', '消息中心', '帮助文档'
      ],
      interfaces: [
        'ERP', 'CRM', 'SAP', 'OA', '财务'
      ]
    };
  }
};
</script>

<style lang="less" scoped>
.system-container {
  height: 100vh;
  padding: 20px;
  background-color: #f0f8ff; // 浅蓝色背景
  overflow-y: auto;
  box-sizing: border-box;

  .section-title {
    color: #333;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #409EFF;
    font-size: 20px;
  }

  // 视图部分样式
  .view-section {
    margin-bottom: 30px;

    .view-cards {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 20px;

      .view-card {
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;

        &:hover {
          transform: translateY(-5px);
        }

        .card-content {
          padding: 15px;

          .card-title {
            color: #d87093; // 淡粉色
            margin-bottom: 10px;
            font-size: 16px;
          }

          .card-desc {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
          }
        }
      }
    }
  }

  // 项目管理部分样式
  .project-section {
    margin-bottom: 30px;

    .project-stages {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;

      .stage {
        background-color: #fff;
        border-radius: 6px;
        padding: 15px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .stage-title {
          color: #d87093; // 淡粉色
          margin-bottom: 15px;
          font-size: 16px;
          text-align: center;
          padding-bottom: 10px;
          border-bottom: 1px solid #eee;
        }

        .stage-items {
          display: flex;
          flex-direction: column;
          gap: 10px;

          .stage-item {
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 4px;
            font-size: 14px;
            color: #333;
            transition: background-color 0.3s;

            &:hover {
              background-color: #e6f7ff;
            }
          }
        }
      }
    }
  }

  // 运营与支撑部分样式
  .operation-section {
    margin-bottom: 30px;

    .operation-cards {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;

      .operation-card {
        background-color: #fff;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

        .card-content {
          padding: 15px;

          .card-title {
            color: #d87093; // 淡粉色
            font-size: 16px;
            text-align: center;
          }
        }
      }
    }
  }

  // 基础模块部分样式
  .base-section {
    margin-bottom: 30px;

    .base-items {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 15px;

      .base-item {
        background-color: #fff;
        padding: 15px;
        border-radius: 6px;
        text-align: center;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        font-size: 14px;
        color: #333;
        transition: transform 0.3s;

        &:hover {
          transform: translateY(-3px);
        }
      }
    }
  }

  // 对外接口部分样式
  .interface-section {
    .interface-items {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;

      .interface-item {
        background-color: #fff;
        padding: 12px 20px;
        border-radius: 6px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        font-size: 14px;
        color: #333;
        transition: all 0.3s;

        &:hover {
          background-color: #e6f7ff;
          transform: translateY(-3px);
        }
      }
    }
  }
}

// 响应式调整
@media (max-width: 1200px) {
  .system-container {
    .project-stages {
      grid-template-columns: 1fr !important;
    }

    .base-items {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
}

@media (max-width: 768px) {
  .system-container {
    padding: 15px;

    .view-cards {
      grid-template-columns: 1fr !important;
    }

    .operation-cards {
      grid-template-columns: 1fr !important;
    }

    .base-items {
      grid-template-columns: 1fr !important;
    }
  }
}
</style>